import BackPageView from '@/components/BackPage'
import useDetailHook from '../servers/detailServer'
import { StyledDetail } from '../styles/detailStyle'
const AlarmDetailView = (props: { moid: string; onBackClick: Function }) => {
	const { detailData } = useDetailHook(props.moid)
	return (
		<StyledDetail className="detail-wrap">
			<BackPageView title={'详情'} onBack={props.onBackClick} isShowBtn={false} />
			<div className="content">
				{detailData.map((item, index) => {
					return (
						<div className="item-wrap" key={`operation-obj` + index}>
							<div className="label">{item.label}</div>
							<div
								className={item.valueName}
								title={
									item.value
										.replace('“usbKey” 设置为“”', '操作：usbKey解绑')
										.replace('“usbKey” 设置为', '操作：usbKey绑定为') || '-'
								}
							>
								{item.label === '事件描述'
									? item.value
											.replace('“usbKey” 设置为“”', '操作：usbKey解绑')
											.replace('“usbKey” 设置为', '操作：usbKey绑定为')
											.split('，原因')
											.shift() || '-'
									: item.value
											.replace('“usbKey” 设置为“”', '操作：usbKey解绑')
											.replace('“usbKey” 设置为', '操作：usbKey绑定为') || '-'}
							</div>
						</div>
					)
				})}
			</div>
		</StyledDetail>
	)
}
export default AlarmDetailView
